<template>
  <div id="home">
    <el-button type="text" @click="openModal">点击打开 Dialog</el-button>
    <el-dialog title="this is a big table" :visible.sync="dialogVisible" width="1200px" center lock-scroll :destroy-on-close='true' :close-on-click-modal='false'>
      <div class="wraper" v-if="dialogVisible">
        <bigdata-table
          ref="table"
          fixed
          stripe
          paste
          show-index
          selectable
          start-edit-type="dblclick"
          v-model="tableDataHandled"
          :row-num="10"
          :col-num="7"
          :index-width="80"
          :col-width="200"
          :header-height="60"
          :can-edit="canEdit"
          :at-right-cell-posi="20"
          :at-left-cell-posi="40"
          :columns="columns"
          :index-render="indexRender"
          :index-render-params="indexRenderParams"
          :fixed-col="0"
          :sort-index="2"
          :default-sort="defaultSort"
          :beforeSave="beforeSave"
          :disabled-hover="false"
          @on-success-save="handleSuccessEdit"
          @on-fail-save="handleFailEdit"
          @on-moving-on-header="handleMoving"
          @on-click-tr="handleClickTr"
          @on-click-td="handleClickTd"
          @on-index-change="handleClickIndex"
        ></bigdata-table>
      </div>
      <p>点击序号可以更明显地标识当前行</p>
      <div>
        <el-row style="margin-bottom:12px">
          <el-button type="text" @click="scrollRowTo(2)" style="margin-right:12px">跳转到第3行</el-button>
          <el-button type="text" @click="scrollRowTo(8978)" style="margin-right:12px">跳转到第8979行</el-button>
          <el-button type="text" @click="scrollRowTo(299)" style="margin-right:12px">跳转到第300行</el-button>
          <el-button type="text" @click="scrollRowTo(199997)" style="margin-right:12px">跳转到第199997行</el-button>
          <el-button type="text" @click="editCell" style="margin-right:12px">编辑第{{ editRow }}行第{{ editCol }}列</el-button>
          <el-button type="text" @click="changeDefaultSort" style="margin-right:12px">改变排序方式</el-button>
        </el-row>
        <el-row>
          <el-input v-model="scrollIndex" style="width:150px;display:inline-block" />
          <el-button
            @click="scrollRowTo(scrollIndex-1)"
            style="margin-right:12px"
          >跳转到第{{ scrollIndex}}行</el-button>
          <el-input v-model="rowLength" style="width:150px;display:inline-block" />
          <el-button @click="changeData(rowLength)" style="margin-right:12px">更改数据行数</el-button>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>
<script>
// let wordsArr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
import bigdataTable from "../components/business/bigdata-table/bigdata-table.vue";
import indexRender from "./index-render.js";
export default {
  name: "app",
  components: {
    bigdataTable
  },
  data() {
    return {
      dialogVisible: false,
      tableData: [],
      columns: [],
      tableDataHandled: [], // 带有数据的表格数据
      emptyData: [], // 空的表格数据
      scrollIndex: 1, // 行号
      rowLength: 100000, // 数据条数
      canEdit: true, //是否可编辑
      editRow: 1, //当前编辑行号
      editCol: 1, //当前编辑列号
      defaultSort: { 2: "up" },
      indexRender,
      indexRenderParams: {
        index: -1
      }
    };
  },
  watch: {
    tableDataHandled(res) {
      // console.log(res)
    }
  },
  methods: {
    openModal() {
      this.dialogVisible = true;
      this.changeData(this.rowLength);
      let headers = [
        "number",
        "number+string",
        "string",
        "number",
        "string",
        "number+string",
        "这是时间",
        "number",
        "string",
        "number+string",
        "这是时间",
        "number",
        "string",
        "number+string",
        "这是时间"
      ];
      let columns = headers.map((title, col) => {
        return {
          title: title,
          // render: (h, col) => {
          // 	return h('div', {
          // 		'class': [
          // 			'header-title-wraper'
          // 		],
          // 		on: {
          // 			click: () => {
          // 				console.log(col)
          // 			}
          // 		}
          // 	}, [
          // 		h('div', {
          // 			'class': [
          // 				'mark-con'
          // 			]
          // 		}, wordsArr[col]),
          // 		h('div', {
          // 			'class': [
          // 				'title-con'
          // 			]
          // 		}, [])
          // 	]);
          // },
          align: "center"
        };
      });
      // console.timeEnd('getColumns');
      this.columns = columns;
    },
    //鼠标表头移动触发
    handleMoving(e) {
      // console.log(e)
    },
    // 跳转行
    scrollRowTo(index) {
      this.$refs.table.scrollToRow(index);
    },
    //点击行事件
    handleClickTr(index) {
      // console.log(index)
    },
    //点击单元格触发
    handleClickTd(params) {
      // console.log(params)
    },
    clickEditBtn() {
      this.canEdit = !this.canEdit;
    },
    // 偶行不可编辑
    beforeSave({ row, col, value }) {
      return (row + 1) % 2;
    },
    handleSuccessEdit({ row, col, value, initRowIndex }) {
      console.log(`第${row + 1}行第${col + 1}列改为${value}`);
    },
    handleFailEdit(res) {
      console.log("偶数行不能编辑");
    },
    editCell() {
      this.$refs.table.editCell(this.editRow - 1, this.editCol - 1);
    },
    changeData(rowLen) {
      let dataArr = [];
      for (let i = 0; i < rowLen; i++) {
        let arr = [
          Number(i + "00"),
          String("count" + i),
          "tests",
          Number("0023" + i),
          "tests",
          String("this is a test info" + i),
          "2019年12月20日",
          String("count" + i),
          "tests",
          Number("0023" + i),
          "tests",
          String("this is a test info" + i),
          "2019年12月20日",
          String("count" + i),
          "tests",
          Number("0023" + i),
          "tests",
          String("this is a test info" + i),
          "2019年12月20日",
          String("count" + i),
          "tests",
          Number("0023" + i),
          "tests",
          String("this is a test info" + i),
          "2019年12月20日"
        ];
        dataArr.push(arr);
        // dateArr = dateArr.reverse()
      }
      this.tableDataHandled = dataArr;
      // console.log(this.tableDataHandled)
    },
    changeDefaultSort() {
      console.log(Object.is(this.defaultSort, { 1: "up" }));
      this.defaultSort =
        Object.keys(this.defaultSort)[0] == 1 ? { 2: "down" } : { 1: "up" };
      // this.defaultSort = {1: 'down'};
    },
    handleClickIndex(index) {
      this.indexRenderParams.index = index;
    }
  },
  mounted() {}
};
</script>

<style lang='less'>
.wraper {
  margin: 0px auto;
  padding: 40px;
  width: 1000px;
  height: 600px;
  overflow: auto;
}
.header-title-wraper {
  height: 100%;
  width: 100%;
  .mark-con {
    height: ~"calc(40% - 1px)";
    width: 100%;
    border-bottom: 1px solid #e9eaec;
    text-align: center;
    line-height: 27px;
  }
  .title-con {
    height: 60%;
    width: 100%;
    text-align: center;
    line-height: 41px;
  }
}
.unormal-value {
  background: #ffa3a1 !important;
}
.unormal-row {
  background: #ffd8d3 !important;
}
.unormal-index {
  background: #ff4c5e !important;
  color: white;
  font-size: 14px;
  font-weight: 700;
  height: 100%;
  line-height: 48px;
}
.index-render-item-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  cursor: pointer;
  .index-slide-wrapper {
    width: 200%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    transform: translateX(0);
    transition: all 0.2s ease;
    &.slide-to-left {
      transform: translateX(-50%);
      transition: all 0.2s ease;
    }
    div {
      float: left;
      width: 50%;
      height: 100%;
    }
    .index-render-tip-con {
      background: #ffd0d0;
      line-height: 46px;
      .is-paintting-tip {
        padding: 4px 10px;
      }
    }
    .index-render-num-con {
      & > span {
        display: inline-block;
        height: 100%;
        line-height: 46px;
      }
    }
  }
}
</style>
